<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item>
          <el-button id="isAgree" type="primary" size="mini" @click="exportClick">导出excel</el-button>
         </el-form-item>
      </el-form>

      <el-table :data="tableData" height="700" border stripe style="width: 100%">
        <!--<el-table-column prop="deptName" label="部门" fixed
                         :filters="filterDeptNames"
                         :filter-method="filterDept"
        ></el-table-column>-->
        <el-table-column prop="deptName" label="部门" fixed>
          <template #header>
            <el-popover placement="right" class="slot" trigger="click">
              <el-select v-model="dName" placeholder="请选择" @change="filterDept($event)">
                <el-option v-for="(item,index) in filterDeptNames" :value="item.value" :label="item.text" :key="index"></el-option>
              </el-select>
              <div slot="reference"><label>部门</label><i class='el-icon-arrow-down'> </i></div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="groupName" label="组别" fixed>
          <template #header>
            <el-popover placement="right" class="slot" trigger="click">
              <el-select v-model="gName" placeholder="请选择" @change="filterGroup($event)">
                <el-option v-for="(item,index) in filterGroupNames" :value="item.id" :label="item.name" :key="index"></el-option>
              </el-select>
              <div slot="reference"><label>组别</label><i class='el-icon-arrow-down'> </i></div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="posName" label="岗位" fixed>
          <template #header>
            <el-popover placement="right" class="slot" trigger="click">
              <el-select v-model="pName" placeholder="请选择" @change="filterPosition($event)">
                <el-option v-for="(item,index) in filterPositionNames" :value="item.id" :label="item.name" :key="index"></el-option>
              </el-select>
              <div slot="reference"><label>岗位</label><i class='el-icon-arrow-down'> </i></div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="needNum" label="需求人数"></el-table-column>
        <el-table-column prop="workNum" label="已入职"></el-table-column>
        <el-table-column prop="stayNum" label="待入职"></el-table-column>
        <el-table-column prop="secondNum" label="待复试"> </el-table-column>
        <el-table-column prop="secondPass" label="复试通过"> </el-table-column>
        <el-table-column prop="finalNum" label="待终试"></el-table-column>
        <el-table-column prop="finalPass" label="已通过"> </el-table-column>

      </el-table>
      <van-pagination @change="selExecution()" v-model="currentPage" :total-items="totalNum" :items-per-page="10" force-ellipses>
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
      </van-pagination>

    </div>
  </div>
</template>

<script>

  import Vue from 'vue';
  import {Dialog, Toast,Pagination,Icon } from "vant"
  import { Loading } from 'element-ui';

  Vue.use(Loading);
  Vue.use(Pagination);
  Vue.use(Icon);


export default {

  data() {
    return {
      tableData: [],
      exportList:[],
      loading:false,

      nowUser: '',
      title: "招聘执行",
      filterDeptNames:[{ text: '家', value: '1' }, { text: '公司', value: '2' }],
      dName:'',//默认选中的部门名称
      filterGroupNames:[],
      gName:'',
      filterPositionNames:[],
      pName:'',

      filterDeptId:'',

      exportData: '/mobiles/exportExecutionData',

      currentPage:1,
      totalNum:1
    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.selExecution();
    this.getExectionDepts();
  },

  methods:{
    //从后端选择当前所有的招聘部门
    getExectionDepts(){
      this.$https.post('/mobiles/getExectionDepts')
              .then((res) => {
                if (res.data.code==200){
                  this.filterDeptNames = res.data.data
                }else {
                  Toast('查找筛选部门出错');
                }

              })
              .catch((err) => {
                console.log(err)
              })
    },

    //筛选部门,根据部门去后端查找对应的数据//, row
    filterDept(value) {
      //console.log(value)
      //this.filterDeptId.indexOf(value)==-1&&this.filterDeptId.push(value)
      //return row.deptName === value;
      this.filterDeptId=value;
      this.$https.post('/mobiles/getExectionByDeptId',{
        deptId:value,
        nowUser:this.nowUser,
        currentPage:this.currentPage
      }).then((res) => {
                this.totalNum=res.data.data.executionDatas.total;
                this.tableData=res.data.data.executionDatas.records;

                this.filterGroupNames=res.data.data.groups;
                this.filterPositionNames=res.data.data.positions;
              })
              .catch((err) => {
                console.log(err)
              })
    },

    //筛选组别
    filterGroup(value) {
      this.filterDeptId=value;
      this.$https.post('/mobiles/getExectionByGroupId',{
        groupId:value,nowUser:this.nowUser,currentPage:this.currentPage
      }).then((res) => {
                this.totalNum=res.data.data.executionDatas.total;
                this.tableData=res.data.data.executionDatas.records;

                this.filterPositionNames=res.data.data.positions;
              })
              .catch((err) => {
                console.log(err)
              })
    },

    //筛选岗位
    filterPosition(value) {
      this.$https.post('/mobiles/getExectionByDeptAndGroupId',{
        deptId:this.filterDeptId,position:value,nowUser:this.nowUser,currentPage:this.currentPage
      }).then((res) => {
        this.totalNum=res.data.data.executionDatas.total;
        this.tableData=res.data.data.executionDatas.records;
      })
              .catch((err) => {
                console.log(err)
              })
    },

    selExecution(){
      let loadingInstance = Loading.service();
      this.$https.post('/mobiles/selExecutionData',{
        nowUser:this.nowUser,
        currentPage:this.currentPage
      }).then(res => {
        if (res.data.code=='500'){
          //Toast(res.data.message);
          Dialog.alert({
            message: res.data.message,
          }).then(() => {
            this.$router.go(-1);
          });
        }else if(res.data.code=='200'){
            //console.log(res);
            this.totalNum=res.data.data.total;
            this.tableData=res.data.data.records;
        }
        loadingInstance.close();
      }).catch(err => {
        console.log(err)
      });
    },

    //导出报表前的查询
    exportClick(){
      let loadingInstance = Loading.service();
      this.$https.post(this.exportData,{
        nowUser:this.nowUser,
      }).then(res => {
        if (res.data.code=='500'){
          Toast(res.data.message);
        }else{
          this.exportList=res.data.data;
          //执行导出方法
          this.export2Excel();
          Toast("导出成功");
        }
        loadingInstance.close();
        //this.$router.go(-1);
      }).catch(err => {
        console.log(err)
      });
    },

    //导出excel数据
    export2Excel(){

      const tHeader=['部门','组别','岗位','需求人数','已入职','待入职','待复试','复试通过','待终试','已通过'];
      const filterVal=['deptName','groupName','posName','needNum','workNum','stayNum','secondNum','secondPass','finalNum','finalPass'];
      const list=this.exportList;
      const data=this.formatJson(filterVal,list);
      const { export_json_to_excel } = require('@/views/hrmanager/excel/export2Excel')
      var time=new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate()+'-'+new Date().getHours()+'-'+new Date().getMinutes()+'-'+new Date().getSeconds();
      export_json_to_excel(tHeader, data, '招聘执行'+time);
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },
  }


};
</script>

<style lang="scss" scoped>

  .main {
    background-color: white;
    width: 100%;
    .el-form {
      padding-right: 10px;
      .el-form-item {
        .el-form-item__label {
          line-height: 16px;
        }
        margin-bottom: 5px;
      }
    }
  }

</style>